<template>
  <!-- 表格封装模版 -->
  <div class="app-container">
    <!--
      request-url 数据列表的请求地址
      data-field  数据数组的字段名称
     -->
    <tabel-from ref="tabelFrom" :page-data="pageData" request-url="de/background/Organize/Theme/Retrieve" data-field="themeList">
      <!-- 检索 按钮配置可插槽添加，详见 tabelFrom -->

      <!-- 数据列表头 按钮配置可插槽添加，详见 tabelFrom -->

      <!-- 数据列表，可根据需求对表格进行自行选择 -->
      <template slot="formList">
        <el-table
          ref="multipleTable"
          v-loading="pageData.listLoading"
          :data="pageData.tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="_handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column
            prop="id"
            label="id"
            min-width="120"
            align="center"
          />

          <el-table-column
            prop="name"
            label="主题名称"
            min-width="120"
            align="center"
          />

          <el-table-column
            prop="info"
            label="主题描述"
            min-width="120"
            align="center"
          />

          <el-table-column
            prop="logo"
            label="主题LOGO"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.logo"
                  :preview-src-list="[scope.row.logo]"
                />
              </div>
            </template>

          </el-table-column>

          <el-table-column
            prop="market"
            label="主题发布的市场"
            min-width="120"
            align="center"
          />

          <!-- 右侧操作栏 -->
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="_edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="_handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>

    </tabel-from>

    <div v-if="pageData.popUpFlag" class="popUp">
      <tabel-add-edit :page-data="pageData" :edit-list="editList" @refreshData="_refreshData">
        <!-- 11 -->
      </tabel-add-edit>
    </div>
  </div>
</template>

<script>

import tabelFrom from '@/components/tabelFrom/index.vue' // 数据页面布局逻辑 组件

import tabelAddEdit from '@/views/table/components/tableAdd-Edit.vue'

export default {
  name: 'Table',
  components: {
    // 数据列表组件
    tabelFrom,
    tabelAddEdit
  },
  data() {
    return {

      // 页面数据配置
      pageData: {
        /**
         * 以下数据不需要做出修改
         */
        listLoading: true, // 列表数据 是否显示加载中

        popUpFlag: false, // 弹出框的标识
        AddEdit: '', // 弹出框显示的是 新增 / 编辑
        AddEditText: '', // 弹出框的标题文字

        tableData: [], // 列表数据

        total: null, // 数据总数

        batchDelData: [], // 选中数据储存（批量删除时用到）

        /**
         * 以下数据根据需求做出变更
         */
        showSearch: true, // 是否显示 检索
        showDataListHeader: true, // 是否显示列表头
        showPagination: true, // 是否显示分页

        // 请求列表的页面数据(默认设置)
        generalQuery: {
          fuzzy: '',
          page: 1,
          size: 20
        }
      },

      // 编辑时编辑的数据
      editList: {}
    }
  },
  created() {
    // this.fetchData()
  },
  methods: {

    // 选择项发生变化时会触发
    /**
     * selection 选中的数据 数组
     */
    _handleSelectionChange(selection) {
      this.pageData.batchDelData = selection
    },

    // 删除单项操作
    _handleDel(val) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除接口写在这块
        console.log(val)

        this.$message({
          type: 'success',
          message: '删除成功!（在此处写删除逻辑）'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 编辑按钮事件
    _edit(row) {
      this.pageData.popUpFlag = true
      this.pageData.AddEdit = 'edit'
      this.pageData.AddEditText = '编辑数据'
      console.log(row, '编辑的数据')
      this.editList = row
    },

    // 新增/编辑后 重新渲染列表数据
    _refreshData() {
      // 调用子组件内的获取列表方法
      this.$refs.tabelFrom._listData()
    }
  }
}
</script>

<style scoped lang="scss">
// 弹出框 位置布局
.app-container{
  min-width: 900px;
  .popUp{
    width: 100%;
    height:100%;
    margin-top: 50px;
    background-color: #c9c6c658;
    // border: 1px solid red;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 4;
  }
}
</style>
